<script lang="ts" setup>
import {computed, onMounted, ref} from 'vue'

import router from "../../../../router/index.js";
import { getPubListBycbs } from "../../../../api/shouyePub.js";
import { ElMessage } from 'element-plus'
import {useRoute} from "vue-router"; //路由接收参数
import { useCounterStore } from "../../../../stores/counter"; //引入pinia

const store = useCounterStore() //使用pinia

//接受参数
const route = useRoute()
const area = computed(() => route.query.area || '') // 自动响应式更新

const radio3 = ref('单人床房')
const radio4 = ref('含早餐')

//选择品牌
const radio5 = ref('')

// 酒店列表
const hotels = ref([

]);
// 搜索
const input = ref('')

// 日期
const value2 = ref([
  store.pubStartTime,
  store.pubEndTime
])

// 搜索
interface RestaurantItem {
  value: string
  link: string
}

//品牌列表
const brandList = ref([
  {
    name: '汉庭',
  },
  {
    name: '如家',
  },
  {
    name: '七天',
  },
  {
    name:'全季'
  },
  {
    name:'桔子'
  },
  {
    name:'速8'
  },
])

// 给酒店列表赋值
const roomTypes = async () => {
  const res= await getPubListBycbs(state1.value,radio5.value,checkboxGroup2.value)
  hotels.value=res.data.data
  console.log(value2.value)
}



// 多选
const checkboxGroup2 = ref('经济') //默认选中
const cities = ['经济', '特惠', '星级']

//城市搜索
const state1 = ref(area.value)
//下拉列表
const restaurants = ref<RestaurantItem[]>([])

const querySearch = (queryString: string, cb: any) => {
  const results = queryString
      ? restaurants.value.filter(createFilter(queryString))
      : restaurants.value
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: '北京', link: '' },
    { value: '上海', link: '' },
    { value: '济南', link: '' },
    { value: '烟台', link: '' },
    { value: '哈尔滨', link: '' },
    { value: '杭州', link: '' },
    { value: '广州', link: '' },
  ]
}

const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}
// 跳转详情页
const tzxq =  (id) => {
  console.log(value2.value)
  //路由跳转
  router.push({
    path: '/JDXQYM',
    query: {
      id: id,
      checkIn: value2.value[0] || '', // 防止 undefined
      checkOut: value2.value[1] || ''
    }
  })

}

onMounted(() => {
  restaurants.value = loadAll()
  roomTypes()
})
</script>


<template>
  <div style="width: 1140px;margin: 0 auto">
<!--    搜素部分-->
    <div style="width: 772px;height: 56px;border: 1px solid #e5e5e5;margin: 0 auto;border-radius: 5px">
      <div style="width: 168px;height: 54px;margin-top: 10px;margin-left: 10px;display: inline-block;margin-right: 10px">
        <el-autocomplete
            v-model="state1"
            :fetch-suggestions="querySearch"
            clearable
            class="inline-input w-50"
            placeholder="请输入目的地"
            @select="handleSelect"
            :style="{ border: 'none' }"
        />
      </div>
      <div class="block" style="width: 316px;height: 54px;display: inline-block;margin-right: 20px">
        <el-date-picker
            v-model="value2"
            type="daterange"
            start-placeholder="入住"
            end-placeholder="离店"
            value-format="YYYY-MM-DD"
            style="width: 300px;height: 34px"

        />
      </div>
      <div style="width: 168px;height: 54px;display: inline-block;margin-right: 2px">
        <el-input v-model="input" style="width: 160px" placeholder="输入酒店关键字"  />
      </div>
      <el-button type="success" @click="roomTypes">搜索</el-button>

    </div>

<!--    导航部分-->
    <div style="width: 1040px;border: 1px solid rgba(173,187,208,0.98);border-radius: 5px;margin-left: 37px">
      <div style="width: 1038px;height:  57px;">
        <div style="width: 120px;height: 56px;background-color: #F7F7F7;display:flex; justify-content: center;align-items: center;float: left">
          星级价格
        </div>
        <div class="demo-button-style" style="display: inline-block;margin-right: 444px;margin-top: 12px;margin-left: 18px">
          <el-radio-group v-model="checkboxGroup2">
            <el-radio-button v-for="(city,index) in cities" :key="index" :label="city" :value="city" class="checkbox-button-spacing">
              {{ city }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <div style="width: 1038px;height:57px;border-top: 1px solid #9ca3b2">
        <div style="width: 120px;height:100%;background-color: #F7F7F7;display:flex; justify-content: center;align-items: center;float: left">
          更多筛选
        </div>
        <div style="margin-top: 20px;margin-left: 144px;width: 500px">
          <el-dropdown style="margin-right: 20px">
            <span class="el-dropdown-link">
              床型
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-radio-group v-model="radio3" size="small">
                  <el-radio-button label="单人床房" value="单人床房" />
                  <el-radio-button label="大床房" value="大床房"  />
                  <el-radio-button label="双床房" value="双床房" />
                  <el-radio-button label="多床房" value="多床房" />
                </el-radio-group>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown style="margin-right: 20px">
            <span class="el-dropdown-link">
              餐食
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-radio-group v-model="radio4" size="small">
                  <el-radio-button label="含早餐" value="含早餐" />
                  <el-radio-button label="含早单" value="含早单"  />
                  <el-radio-button label="含双早" value="含双早" />
                  <el-radio-button label="含三早以上" value="含三早以上" />
                </el-radio-group>
              </el-dropdown-menu>
            </template>
          </el-dropdown>


          <el-dropdown style="margin-right: 20px">
            <span class="el-dropdown-link">
              品牌
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-radio-group v-model="radio5" size="small">
                  <el-radio-button :label="brandLists.name" :value="brandLists.name" v-for="(brandLists,index) in brandList" :key="brandLists.index"/>
                </el-radio-group>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

        </div>
      </div>
    </div>


    <div style="display: none">
<!--      选的条件-->
    </div>

    <div style="width: 1060px;margin: 0 auto">
        <h1 style="margin-bottom: 30px;margin-top: 20px">{{hotels.length}}家酒店</h1>
      <div style="width: 1060px;margin: 0 auto;">
        <div v-for="hotel in hotels" :key="hotel.id" style="width: 1040px;height:200px;overflow: hidden;margin-bottom: 10px">
          <div style="width: 850px;height: 200px;display: inline-block">
            <img :src="hotel.pubPath" alt="" width="165px" height="200px" style="display: inline-block;float: left;margin-right: 41px">
            <div style="display: inline-block;float: left;margin-right: 41px">
              <h1 style="margin-bottom: 30px">{{ hotel.address }}</h1>
              <span style=" width: 32px;height: 25px;background-color: #0dd0a0;color: white;border-radius: 5px;text-align: center;margin-right: 20px">{{ hotel.score }}分</span>
              <span style="display: inline-block;"></span>
              <p class="">
                <span>{{hotel.detailedAddress}}</span>
              </p>
            </div>
          </div>
          <div style="width: 104px;height: 200px;display:inline-block;float: right;margin-top: 20px">
            <div style="font-size: 25px;color: red;font-weight: bold;margin-top: 107px">￥{{ hotel.price }}元</div>
            <div style="background-color: #07AF53;width: 104px;height: 40px;color: white;display: flex;justify-content: center;align-items: center" @click="tzxq(hotel.id)">查看详情</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
.gongneng {
  height: 25px;
  width: 200px;
  margin-top: 30px;
}
.gongneng span{
  display: inline-block;
  height: 23px;
  font-size: 14px;
  border: 1px solid #0dd0a0;
  color: #0dd0a0;
  margin-right: 10px;
}


.el-autocomplete::part(input) {
  border: none;
}
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>